const path = require('path')
// npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
// pwa 编译
// npm install workbox-webpack-plugin --save-dev
const WorkboxPlugin = require('workbox-webpack-plugin')

// 演示代码分割, 比如说把两个模块共享的 lodash 给分割出去变成一个文件
module.exports = (env) => {
  // 使用环境变量
  console.log('Production: ', env.production) // true
  return {
    // 生产环境将默认使用 TerserPlugin 来压缩并且混淆代码
    mode: env.production ? 'production' : 'development',
    // 两个入口文件
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },

    // mode 为 development 时使用 inline-source-map 会内联插入代码，可以追踪错误代码准确信息和源代码的错误位置. 显著增加 bundle 体积, 降低整体性能, 但是构建速度快
    // mode 为 production 时应该选用 source-map. 外置一个 sourceMap 文件, 同样可以追踪错误代码准确信息和源代码的错误位置
    // 打开这个选项后, development 产出的 bundle.js 从 555kb 提升到 1.38MB
    // 代码里产生的错误有更明显的指引.
    // ...(env.production ? { devtool: 'source-map' } : { devtool: 'inline-source-map' }),

    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist'),
      // 在每次构建前清理 /dist 文件夹
      clean: true
    },
    plugins: [
      // 用来生成 dist/index.html 的
      // 所有的 output 的 bundle 会自动添加到 html 中。
      new HtmlWebpackPlugin({
        title: 'Progressive Web Application'
      }),
      // pwa 支持
      // npm install workbox-webpack-plugin --save-dev
      new WorkboxPlugin.GenerateSW({
        // 这些选项帮助快速启用 ServiceWorkers
        // 不允许遗留任何“旧的” ServiceWorkers
        clientsClaim: true,
        skipWaiting: true
      })
    ],
    optimization: {
      // 使 splitChunks 的 vendor hash 未经变化时锁定, 不随 index.js 的修改而修改.
      moduleIds: 'deterministic',
      // 将 runtime 代码拆分为一个单独的 chunk
      runtimeChunk: 'single',
      // 将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中
      // 因此通过实现以上步骤，利用 client 的长效缓存机制，命中缓存来消除请求，并减少向 server 获取资源，同时还能保证 client 代码和 server 代码版本一致
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    }
  }
}
